<template>
	<view class="content">
		
		<view v-show="isVip==true">
			<view class="backgroundBox">
				<image class="bgImage" src="/pages_mine/pages/static/vip/bg_1.png" mode=""></image>
				<view class="floatBox">
					<image class="icon" src="/pages_mine/pages/static/vip/icon_1.png" mode=""></image>
					<view class="titleName">单领VIP卡</view>
					<view class="title">会员卡全新升级 精选 6 大权益</view>
					<view class="clearBoth"></view>
					<view class="toolRows">
						<view class="toolBox">
							<image class="icons" src="/pages_mine/pages/static/vip/icon_2.png" mode=""></image>
							<view class="name fontSize13">专享折扣</view>
							<view class="littleTitle">至少96折</view>
						</view>
						<view class="toolBox">
							<image class="icons" src="/pages_mine/pages/static/vip/icon_3.png" mode=""></image>
							<view class="name fontSize13">专享购物券</view>
							<view class="littleTitle">140元/月</view>
						</view>
						<view class="toolBox">
							<image class="icons" src="/pages_mine/pages/static/vip/icon_4.png" mode=""></image>
							<view class="name fontSize13">生日礼券</view>
							<view class="littleTitle">惊喜礼品</view>
						</view>
						<view class="toolBox">
							<image class="icons" src="/pages_mine/pages/static/vip/icon_5.png" mode=""></image>
							<view class="name fontSize13">专享商品</view>
							<view class="littleTitle">仅会员可买</view>
						</view>
						<view class="toolBox">
							<image class="icons" src="/pages_mine/pages/static/vip/icon_6.png" mode=""></image>
							<view class="name fontSize13">0元极速退</view>
							<view class="littleTitle">退货免运费</view>
						</view>
						<view class="toolBox">
							<image class="icons" src="/pages_mine/pages/static/vip/icon_7.png" mode=""></image>
							<view class="name fontSize13">专属客服</view>
							<view class="littleTitle">一键召唤</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="chooseBox">
				<view class="threeBox" :class="item.beThis?'thisBox':''" v-for="(item,index) in chooseBox" :key="index" @tap="beThis(index)">
					<view class="name">{{item.name}}</view>
					<view class="priceIcon fontSemiBold">￥</view>
					<view class="price fontSemiBold">{{item.price}}</view>
					<view class="clearBoth"></view>
					<s class="priceBefore">￥{{item.priceBefore}}</s>
				</view>
			</view>
			
			<view class="btnSure" @tap="btnPay">立即以{{useMoney}}元开通</view>
			
			<view class="article textCenter">开通即得{{intergral}}积分</view>
			<view class="flexCenter">
				<view class="articles textCenter">开通前阅读</view>
				<view class="jump textCenter" @tap="jump">《会员服务协议》</view>
			</view>
		</view>
		
		<!-- <view v-show="isVip"> -->
		<view v-show="isVip==false">
			<view class="backgroundBoxes">
				<image class="bgImage" src="/pages_mine/pages/static/vip/bg_2.png" mode=""></image>
				<view class="floatBox">
					<image class="icon" src="/pages_mine/pages/static/vip/icon_1.png" mode=""></image>
					<view class="titleName">单领VIP卡</view>
					<view class="clearBoth"></view>
					<view class="titles marginLeft5">累计已省</view>
					<view class="priceBoxs marginLeft5">
						<view class="prices fontSemiBold">{{data.money}}</view>
						<!-- <view class="again">续费</view> -->
						<view class="time">{{data.time}} 到期</view>
						<view class="clearBoth"></view>
					</view>
					<view class="clearBoth"></view>
				</view>
			</view>
			
			<view class="toolRow">
				<view class="titles">我的权益</view>
				<view class="toolBox">
					<image class="icons" src="/pages_mine/pages/static/vip/icon_22.png" mode=""></image>
					<view class="name fontSize13">专1享折扣</view>
					<view class="littleTitle">至少96折</view>
				</view>
				<view class="toolBox">
					<image class="icons" src="/pages_mine/pages/static/vip/icon_33.png" mode=""></image>
					<view class="name fontSize13">专享购物券</view>
					<view class="littleTitle">140元/月</view>
				</view>
				<view class="toolBox">
					<image class="icons" src="/pages_mine/pages/static/vip/icon_44.png" mode=""></image>
					<view class="name fontSize13">生日礼券</view>
					<view class="littleTitle">惊喜礼品</view>
				</view>
				<view class="toolBox">
					<image class="icons" src="/pages_mine/pages/static/vip/icon_55.png" mode=""></image>
					<view class="name fontSize13">专享商品</view>
					<view class="littleTitle">仅会员可买</view>
				</view>
				<view class="toolBox">
					<image class="icons" src="/pages_mine/pages/static/vip/icon_66.png" mode=""></image>
					<view class="name fontSize13">0元极速退</view>
					<view class="littleTitle">退货免运费</view>
				</view>
				<view class="toolBox">
					<image class="icons" src="/pages_mine/pages/static/vip/icon_77.png" mode=""></image>
					<view class="name fontSize13">专属客服</view>
					<view class="littleTitle">一键召唤</view>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>
<style>
	.content{padding-bottom: 40upx;}
	.content .backgroundBox{width: 95%;height: 740upx;margin-left: 2.5%;border-radius: 10upx;margin-top: 40upx;}
	.content .backgroundBox .bgImage{width: 100%;height: 740upx;}
	/* #ifdef MP-WEIXIN */
	.content .backgroundBox .floatBox{width: 95%;height: 740upx;padding:5% 0;position: absolute;top:30upx;left: 2.5%;border-radius: 10upx;z-index: 2;}
	/* #endif */
	/* #ifdef H5 */
	.content .backgroundBox .floatBox{width: 95%;height: 740upx;padding:5% 0;position: absolute;top:0;left: 2.5%;border-radius: 10upx;z-index: 2;}
	/* #endif */
	
	.content .backgroundBox .floatBox .icon{float: left;width: 34upx;height:44upx;margin-left: 5%;}
	.content .backgroundBox .floatBox .titleName{font-family: HYXiaoBoShuHei;font-size: 32upx;color:white;float: left;margin-left:20upx}
	.content .backgroundBox .floatBox .title{width: 95%;float: left;color:white;font-size: 36upx;font-weight: bold;margin:40upx 0;margin-left:5%;}
	.content .backgroundBox .floatBox .toolRows{width: 97%;height:515upx;position: relative;left:1.5%;bottom:0upx;border-radius: 30upx;display: flex;justify-content:space-around;align-items: center;flex-wrap: wrap;background:rgb(224,105,64);}
	.content .backgroundBox .floatBox .toolRows .toolBox{width: 25.1%;display: flex;justify-content:center;flex-wrap: wrap}
	.content .backgroundBox .floatBox .toolRows .toolBox .icons{width:114upx;height:114upx}
	.content .backgroundBox .floatBox .toolRows .toolBox .name{color:white;font-weight:bold;margin:10upx 0 0upx 0}
	.content .backgroundBox .floatBox .toolRows .toolBox .littleTitle{font-size: 22upx;color:white;}
	.content .chooseBox{width:95%;margin-left:2.5%;display: flex;justify-content: space-between;margin-top:50upx;}
	.content .chooseBox .threeBox{width:30%;padding:20upx 0;display: flex;justify-content: center;flex-wrap: wrap;border-radius: 10upx;box-shadow: 10upx 10upx 10upx rgba(0,0,0,0.1);border:2upx solid white;}
	.content .chooseBox .thisBox{border:2upx solid #DC582A;background: rgb(251,238,233);}
	.content .chooseBox .threeBox .name{width: 100%;color:#262626;font-weight: bold;font-size: 32upx;text-align: center;margin-bottom: 20upx;}
	.content .chooseBox .threeBox .priceIcon{height:40upx;line-height: 40upx;margin-top: 20upx;color:#DC582A;font-size: 32upx;float:left;font-weight: bold;}
	.content .chooseBox .threeBox .price{height:70upx;line-height: 70upx;color:#DC582A;font-size: 46upx;float:left}
	.content .chooseBox .threeBox .priceBefore{width: 100%;color:#BBBBBB;font-size: 32upx;text-align: center;}
	.content .btnSure{width: 95%;margin-left: 2.5%;font-size: 36upx;padding:25upx 0;border-radius: 100upx;background:#DC582A;color:white;text-align: center;margin-top: 100upx;}
	.content .article{color:#999999;margin-top: 40upx;color:#999999}
	.content .flexCenter{display: flex;justify-content: center;}
	.content .articles{color:#999999;margin-top: 10upx;color:#999999;float:left}
	.content .jump{color:#054C9B;margin-top: 10upx;float:left}
	.content .backgroundBoxes{width: 95%;height: 280upx;margin-left: 2.5%;border-radius: 10upx;margin-top: 40upx;}
	.content .backgroundBoxes .bgImage{width: 100%;height: 280upx;}
	.content .backgroundBoxes .floatBox{width: 95%;height: 280upx;padding:5% 0;position: absolute;top:0;left: 2.5%;border-radius: 10upx;z-index: 2;}
	.content .backgroundBoxes .floatBox .icon{float: left;width: 34upx;height:44upx;margin-left: 5%;}
	.content .backgroundBoxes .floatBox .titleName{font-family: HYXiaoBoShuHei;font-size: 32upx;color:white;float: left;margin-left:20upx}
	.content .backgroundBoxes .floatBox .titles{font-size: 26upx;color:#FFFFFF;margin-top: 70upx;}
	.content .backgroundBoxes .floatBox .priceBoxs{width: 95%;height:100upx;line-height: 100upx;}
	.content .backgroundBoxes .floatBox .priceBoxs .prices{color:white;font-size: 56upx;float: left;}
	.content .backgroundBoxes .floatBox .priceBoxs .time{float: right;color:white;margin-right: 5%;}
	.content .backgroundBoxes .floatBox .priceBoxs .again{float: right;color:white;margin-right: 5%;}
	.content .toolRow{width: 95%;padding:5%;margin-top: 40upx;background: rgb(251,238,233);position: relative;left:2.5%;bottom:0upx;border-radius: 30upx;display: flex;justify-content:space-around;align-items: center;flex-wrap: wrap;}
	.content .toolRow .titles{width: 100%;text-align: left;color:#DC582A;font-size: 36upx;font-weight: bold;margin-bottom: 40upx;}
	.content .toolRow .toolBox{width: 25.1%;display: flex;justify-content:center;flex-wrap: wrap;margin-top: 20upx;}
	.content .toolRow .toolBox .icons{width:114upx;height:114upx;color:#DC582A}
	.content .toolRow .toolBox .name{color:white;font-weight:bold;margin:10upx 0 0upx 0;color:#DC582A}
	.content .toolRow .toolBox .littleTitle{font-size: 22upx;color:#DC582A}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				chooseBox:[
					// {id:1,name:"1个月VIP",price:111,priceBefore:321,beThis:true},
					// {id:1,name:"1个月VIP",price:222,priceBefore:321,beThis:false},
					// {id:1,name:"1个月VIP",price:333,priceBefore:321,beThis:false},
				],
				data:{
					time:"",
					money:""
				},
				useMoney:"",
				intergral:"",
				isVip:"",

			}
		},
		onLoad(){
			this.AjaxLoad()
		},
		methods: {
			AjaxLoad(){
				var chooseBox = []
				let param={
					token:this._$userToken("userInfo").token,
				};
				this._$InitRequest.request("member_info/level", param).then(res => {
					this.intergral = res.data.level[0].integral
					
					if( res.data.vip.vip == 0 ){
						this.isVip = true
					}else{
						this.isVip = false
					}
					res.data.level.forEach( (item,index) =>{
						var beThis = false 
						if( index == 0 )beThis = true
						chooseBox.push({
							id:item.id,
							name:item.level_name,
							price:item.price,
							priceBefore:item.old_price,
							intergral:item.integral,
							beThis:beThis
						})
					})
					for (var i = 0; i < chooseBox.length; i++){this.chooseBox.push( chooseBox[i] )}
					
					this.data.time  = res.data.vip.vip_end_time
					this.data.money = res.data.vip.economize
					
					for (var i = 0; i < this.chooseBox.length; i++) {
						if( this.chooseBox[i].beThis == true )this.useMoney = this.chooseBox[i].price
					}
				},error=>{})
			},
			beThis(e){
				for (var i = 0; i < this.chooseBox.length; i++) {
					this.chooseBox[i].beThis = false
					this.chooseBox[e].beThis = true
					if( this.chooseBox[i].beThis == true ){
						console.log( this.chooseBox[i] );
						this.useMoney = this.chooseBox[i].price
						this.intergral = this.chooseBox[i].intergral
					}
				}
			},
			jump(){
				uni.navigateTo({
					url:"/pages_mine/pages/set_about_details/set_about_details?index=40&name=" + "会员服务协议"
				})
			},
			btnPay(){
				var level_id = ""
				for (var i = 0; i < this.chooseBox.length; i++) {
					if( this.chooseBox[i].beThis == true )level_id = this.chooseBox[i].id
				}
				let param={
					token:this._$userToken("userInfo").token,
					level_id:level_id
				};
				this._$InitRequest.request("member_level/order", param).then(resA => {
					uni.requestPayment({
					   provider: 'wxpay',
					   appId: resA.data.wxpayinfos.appId,
					   timeStamp: String(resA.data.wxpayinfos.timestamp),
					   nonceStr: resA.data.wxpayinfos.nonceStr,
					   package:"prepay_id="+resA.data.wxpayinfos.package,
					   signType: 'MD5',
					   paySign: resA.data.wxpayinfos.sign,
					    success: function (resB) {
							uni.showToast({icon:"success",title:"充值成功"})
							setTimeout(function(){
								uni.switchTab({
									url:"/pages/tabbar/mine"
								})
							},1500)
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				},error=>{})
			},
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>